<template>
  <div class="commodity-page">
    <!-- 商品表头部 -->
    <div class="page-header">
      <!-- 搜索商品 -->
      <div class="header-search">
        <el-input v-model="inputSearchStr" placeholder="请输入商品名称" class="search-input"></el-input>
        <el-button type="primary" :icon="Search" @click="commoditySearch_btn">搜索</el-button>
      </div>
      <!-- 下拉列表选择商品分类 -->
      <div class="header-select">
        <span class="select-tip">商品分类:</span>
        <el-select v-model="selectCommodityCategory" placeholder="请选择商品分类" @change="commodityCategoryChange" style="width: 170px">
          <el-option  v-for="item in commodityCategoryList" :key="item.categoryId" :label="item.categoryName" :value="item.categoryId" />
        </el-select>
      </div>
      <!-- 按商品销量、商品销售额、商品创建时间、商品更新时间排序 -->
      <div class="header-sort">
        <el-button type="info" @click="commodityListSort_btn(0)">销量排序</el-button>
        <el-button type="warning" @click="commodityListSort_btn(1)">销售额排序</el-button>
      </div>
      <!-- 按钮集合部分 -->
      <div class="header-btns">
        <el-button type="primary" :icon="Plus" @click="saveCommodity_btn">添加商品</el-button>
        <el-button type="success" :icon="Delete" :disabled="selectedDelCommodityIds.length === 0" @click="deleteMoreCommodity_btn">批量删除商品</el-button>
      </div>
    </div>
    <!-- 商品表部分 -->
    <el-table :data="commodityList" border class="page-table" @select-all="tableSelectChange" @select="tableSelectChange">
      <el-table-column type="selection" width="50" />
      <el-table-column type="index" label="序号" width="55" />
      <el-table-column prop="commodityCategoryName" label="商品分类" width="90"/>
      <el-table-column prop="commodityName" label="商品名称" width="90"/>
      <el-table-column prop="commodityDescription" label="商品描述" width="200"/>
      <el-table-column prop="commodityStandardList" label="商品规格" width="200">
        <template #="{row, $index}">
          <el-tag v-for="(item,index) in row.commodityStandardList" :key="index" type="primary" effect="dark" class="table-attr">{{ item.commodityAttr }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="commodityDiscount" label="商品折扣" width="90"/>
      <el-table-column prop="commoditySales" label="商品销量" width="90"/>
      <el-table-column prop="commoditySaleMoney" label="商品销售额" width="100"/>
      <el-table-column prop="commodityImgs" label="商品图片" align="center" width="120">
        <template #="{row,$index}">
          <img :src="row.commodityImgs[0]" alt="商品图片" title="商品图片" class="table-img">
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="商品创建时间" width="120"/>
      <el-table-column prop="updateTime" label="商品更新时间" width="120"/>
      <el-table-column label="操作" width="130">
        <template #="{row,$index}">
          <el-button :icon="Edit" type="primary" title="编辑商品" @click="editCommodity_btn(row)"></el-button>          
          <el-popconfirm title="确定要删除该商品吗?" @confirm="deleteCommodity_btn(row)">
            <template #reference>
              <el-button :icon="Delete" type="info" title="删除商品"></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器部分 -->
    <el-pagination background layout="prev, pager, next, total, sizes, ->, jumper" :total="commodityListCount" :page-sizes="[3,5,10,20,30,50]" :default-current-page="pagination_page" :default-page-size="pagination_size" @change="pagination_change" class="page-pagination"/>
    <!-- drawer_dialog抽屉 弹出层 部分 -->
    <el-drawer ref="drawerRef" v-model="drawer_dialog" :title="drawer_dialog_state === 0 ? '添加商品' : '修改商品'" :before-close="drawerDialogHandleClose" direction="rtl" class="page-drawerDialog">
      <div class="drawerDialog_content">
        <el-form :model="commodityInfo" ref="userInfoForms">
          <el-form-item label="商品分类:" label-width="100px">
            <el-select v-model="commodityInfo.commodityCategoryId" :placeholder="commodityInfo.commodityCategoryName" class="drawer-categorySelect">
              <el-option v-for="item in commodityCategoryList" :key="item.categoryId" :value="item.categoryId" :label="item.categoryName" />
            </el-select>
          </el-form-item>
          <el-form-item label="商品名称:" label-width="100px">
            <el-input v-model="commodityInfo.commodityName" :placeholder="commodityInfo.commodityName"></el-input>
          </el-form-item>
          <el-form-item label="商品描述:" label-width="100px">
            <textarea name="" id="" cols="30" rows="10" v-model="commodityInfo.commodityDescription" class="drawer-descTextarea"></textarea>
          </el-form-item>
          <el-form-item v-show="drawer_dialog_state === 0 ? false : true" label="商品规格:" label-width="100px">
            <el-tag v-for="item,index in commodityInfo.commodityStandardList" :key="index" type="success" effect="dark" class="drawer-attr">{{ item.commodityAttr }}</el-tag>
          </el-form-item>
          <el-form-item label="商品折扣:" label-width="100px">
            <el-select v-model="commodityInfo.commodityDiscount" :placeholder="commodityInfo.commodityDiscountName" class="drawer-discount">
              <el-option v-for="item,index in commodityDiscountSelectOptions" :key="index" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-show="drawer_dialog_state === 0 ? false : true" label="商品销量:" label-width="100px">
            <span class="commoditySales">{{ commodityInfo.commoditySales }}</span>
          </el-form-item>
          <el-form-item v-show="drawer_dialog_state === 0 ? false : true" label="商品销售额:" label-width="100px">
            <span class="commoditySaleMaoey">{{ commodityInfo.commoditySaleMoney }}</span>
          </el-form-item>
          <el-form-item label="商品图片:" label-width="100px">
            <!-- 展示已有的图片部分 -->
            <div class="drawer-image" v-if="commodityInfo.commodityImgs.length !== 0">
              <div class="image-item" v-for="item,index in commodityInfo.commodityImgs" :key="index">
                <img :src="item" class="image-item-img" />
                <el-icon :size="20" color="#409eff" title="移除" class="image-item-remove" @click="removeCommodityOldPicture_btn(item,index)"><RemoveFilled /></el-icon>
              </div>
            </div>
            <!-- 新上传图片部分 -->
            <el-upload action="http://47.120.78.25:8090/uploadByBlob" name="multipartFile" :before-upload="fileBeforeUpload" :on-success="fileSuccessUpload" list-type="picture-card" :multiple="true" :limit="10" class="drawer-uploader">
              <el-icon  class="uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
        </el-form>
        <div class="drawer-btns">
          <el-button @click="drawerDialogCancel_btn">取消</el-button>
          <el-button type="primary" :loading="isLoadingBtn" @click="drawerDialogSave_btn">提交</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted } from "vue";
//引入ElementPlus组件
import { ElTable, ElTableColumn, ElButton, ElPagination, ElInput, ElSelect, ElOption, ElMessage, ElTag, ElDrawer, ElForm, ElFormItem, ElUpload, ElIcon, ElPopconfirm, ElMessageBox } from "element-plus";
import { Delete, Edit, Plus, Search, RemoveFilled } from '@element-plus/icons-vue';
//引入请求函数
import { reqCommodityList, reqAllCommodityCategoryList, reqUpdateCommodity, reqSaveCommodity, reqDeleteCommodity, reqCommodityListByCategory, reqDeleteCommodityBatch, reqCommodityListSort, reqCommodityListByCommodityNmae } from "@/api/product/index.ts";
//引入类型约束
import { commodityInfo as commodity, commodityCategory } from "@/api/product/type.ts";

//表格:商品数据列表
let commodityList = ref<commodity[]>([]);
//分页器相关数据   商品列表数据总条数
let commodityListCount = ref(0);
let pagination_size = ref(3);
let pagination_page = ref(1);
//drawer-dialog开关控制开闭
let drawer_dialog = ref(false);
let isLoadingBtn = ref(false);  //drawer_dialog提交按钮的loading效果展示
let drawer_dialog_state = ref(9);  //drawer_dialog状态：0-添加商品状态  1-修改商品状态
//商品信息form
let commodityInfo = reactive({
  commodityId:0,  //商品对应id
  commodityName:"",  //商品名称
  commodityDescription:"",  //商品描述
  commodityStandardList:[],  //商品规格集合
  commodityDiscount:0,  //商品折扣
  commodityDiscountName:"",  //商品折扣名称
  commoditySales:0,  //商品销量
  commoditySaleMoney:0,  //商品销售额
  commodityCategoryId:0,  //商品分类id
  commodityCategoryName:"",  //商品分类名称
  commodityImgs:[],  //商品图片地址字符串数组集合
  commodityNewImgs:[],  //添加的新图片地址字符串数组集合
  createTime:"",  //商品创建时间
  updateTime:""  //商品更新时间  
})
//所有的商品分类信息
let commodityCategoryList = ref<commodityCategory[]>([]);
//根据商品分类筛选商品的select选择
let selectCommodityCategory = ref(null);  //商品分类id
//商品折扣select选择器选项
const commodityDiscountSelectOptions = [{value:1,label:"不打折"},{value:0.99,label:"九九折"},{value:0.95,label:"九五折"},{value:0.9,label:"九折"},{value:0.85,label:"八五折"},{value:0.8,label:"八折"},{value:0.7,label:"七折"},{value:0.6,label:"六折"},{value:0.5,label:"五折"},{value:0.4,label:"四折"},{value:0.3,label:"三折"},{value:0.2,label:"二折"},{value:0.1,label:"一折"}];
//表格选择的商品id commodityIds 将要进行删除操作
let selectedDelCommodityIds = ref<number[]>([]);
//搜索框收集输入商品名称搜索商品
let inputSearchStr = ref("");

//el-upload文件上传相关方法
const fileBeforeUpload = (file:any) => {
  if(!(file.type === 'image/jpeg' || file.type === 'image/png')){
    ElMessage({type:"info",message:"请选择jpg/png类型的图片文件!"});
    return false;
  }
  if((file.size)/1024/1024 > 4){
    ElMessage({type:"info",message:"请选择小于4M的图片文件"});
    return false;
  }
  return true;
}
const fileSuccessUpload = (response:any) => {
  commodityInfo.commodityNewImgs.unshift(response.data[0] as never);
  console.log("文件上传api",response);
}

//请求获取商品列表数据
const getCommodityList = async (page:number = 1, pageSize:number = 3) => {
  let res = await reqCommodityList(page,pageSize);
  if(res.code === 200) {
    ElMessage({type:"success",message:"商品列表数据获取成功!"});
    //商品图片字符串集合，需要处理
    let result:any = res.data.rows;
    result.forEach(item => {
      item.commodityImgs = item.commodityImgs.split(",");
    })
    //赋值商品列表数据
    commodityList.value = result;
    commodityListCount.value = res.data.total;
  } else {
    ElMessage({type:"error",message:"商品列表数据获取失败!"});
  }
  console.log('分页获取商品信息列表api',res);
}
//请求获取所有的商品分类信息
const getAllCommodityCategoryList = async () => {
  let res = await reqAllCommodityCategoryList();
  if(res.code === 200) {
    //获取所有的商品分类数据成功
    commodityCategoryList.value = res.data.rows;
  }
  console.log('获取所有商品分类数据接口api',res);
}

//商品表中相关按钮事件
const editCommodity_btn = (productInfo:any) => {
  //打开drawer_dialog开关
  drawer_dialog.value = true;
  //修改drawer_dialog状态
  drawer_dialog_state.value = 1;
  //给商品信息form赋值
  commodityInfo.commodityId = productInfo.commodityId;
  commodityInfo.commodityName = productInfo.commodityName;
  commodityInfo.commodityDescription = productInfo.commodityDescription;
  commodityInfo.commodityStandardList = productInfo.commodityStandardList;
  commodityInfo.commodityDiscount = productInfo.commodityDiscount;
  commodityInfo.commodityDiscountName = dealDiscountName(productInfo.commodityDiscount);  //处理折扣名称
  commodityInfo.commoditySales = productInfo.commoditySales;
  commodityInfo.commoditySaleMoney = productInfo.commoditySaleMoney;
  commodityInfo.commodityCategoryId = productInfo.commodityCategoryId;
  commodityInfo.commodityCategoryName = productInfo.commodityCategoryName;
  commodityInfo.commodityImgs = JSON.parse(JSON.stringify(productInfo.commodityImgs));  //此处深拷贝下
  commodityInfo.createTime = productInfo.createTime;
  commodityInfo.updateTime = productInfo.updateTime;
}
const deleteCommodity_btn = async (productInfo:any) => {
  let commodityId = productInfo.commodityId;
  if(commodityId === null || commodityId === "" || commodityId === null)return;
  //发请求删除该商品
  let res = await reqDeleteCommodity(commodityId);
  if(res.code === 200){
    ElMessage({type:"success",message:"商品删除成功!"});
    //重新请求数据
    getCommodityList(pagination_page.value, pagination_size.value);
  } else {
    ElMessage({type:"error",message:res.msg});
  }
  console.log("删除商品api",res);
}

//商品列表table选择的change事件
const tableSelectChange = (productList:any) => {
  let commodityIds = productList.map(item => item.commodityId);
  selectedDelCommodityIds.value = commodityIds;
}

//头部按钮集合部分事件
const saveCommodity_btn = () => {
  //修改drawer_dialog的状态
  drawer_dialog_state.value = 0;
  //打开drawer_dailog
  drawer_dialog.value = true;
  //@ts-ignore 重置commodityInfo表中信息
  commodityInfo.commodityCategoryId = "请选择商品分类";
  //@ts-ignore
  commodityInfo.commodityDiscount = "请选择商品折扣";
}
const deleteMoreCommodity_btn = () => {
  ElMessageBox.confirm('确定要删除选中的商品吗(删除不可恢复)?','提示',{confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'})
    .then(async () => {
      //发请求批量删除商品
      let res = await reqDeleteCommodityBatch(selectedDelCommodityIds.value);
      if(res.code === 200){
        ElMessage({type:"success",message:res.msg});
        //更新商品列表数据
        getCommodityList(pagination_page.value, pagination_size.value);
        //置空table选择删除的商品ids
        selectedDelCommodityIds.value = [];
      } else {
        ElMessage({type:"error",message:res.msg});
      }
      console.log('批量删除商品数据api',res);
    })
    .catch(() => {
      ElMessage({type: 'info',message: '取消删除!'});
    })
}
//销量排序、销售额排序按钮事件
const commodityListSort_btn = async (type:number = 0) => {
  let fieldName:string = "";  //排序字段名(commodity_sales commodity_sale_money)
  let sortRule:string = "DESC";  //排序规则(asc desc)  默认降序desc
  if(type === 0) {
    //销量排序
    fieldName = "commodity_sales";
  } else if(type === 1) {
    //销售额排序
    fieldName = "commodity_sale_money";
  }
  let res = await reqCommodityListSort(fieldName, sortRule);
  if(res.code === 200) {
    //商品图片字符串集合，需要处理
    let result:any = res.data.rows;
    result.forEach(item => {
      item.commodityImgs = item.commodityImgs.split(",");
    })
    //赋值商品列表数据
    commodityList.value = result;
    commodityListCount.value = res.data.total;

    ElMessage({type:"success",message:"排序成功!"});
  } else {
    ElMessage({type:"error",message:res.msg});
  }
  console.log('商品表排序输出api',res);
}
//根据商品分类筛选商品的change事件
const commodityCategoryChange = async () => {
  if(typeof selectCommodityCategory.value !== "number")return;
  //发请求获取数据
  let res = await reqCommodityListByCategory(selectCommodityCategory.value);
  if(res.code === 200){
    //商品图片字符串集合，需要处理
    let result:any = res.data.rows;
    result.forEach(item => {
      item.commodityImgs = item.commodityImgs.split(",");
    })
    //赋值商品列表数据
    commodityList.value = result;
    commodityListCount.value = res.data.total;
    ElMessage({type:"success",message:"商品分类筛选成功!"});
  } else {
    ElMessage({type:"error",message:res.msg});
  }
  console.log('商品分类筛选api',res);
}
//根据商品名称搜索商品按钮事件
const commoditySearch_btn = async () => {
  if(inputSearchStr.value.trim() == "")return ElMessage({type:"info",message:"请输入商品名称!"});
  //向服务器发送请求
  let res = await reqCommodityListByCommodityNmae (inputSearchStr.value);
  if(res.code === 200) {
    //商品图片字符串集合，需要处理
    let result:any = res.data.rows;
    result.forEach(item => {
      item.commodityImgs = item.commodityImgs.split(",");
    })
    //赋值商品列表数据
    commodityList.value = result;
    commodityListCount.value = res.data.total;
    ElMessage({type:"success",message:"商品搜索成功!"});
  } else {
    ElMessage({type:"error",message:res.msg});
  }
  console.log("商品名称搜索api",res);
}

//drawer_dialog相关事件
const drawerDialogHandleClose = () => {
  //关闭drawer_dialog开关
  drawer_dialog.value = false;
  //置空商品信息form数据
  commodityInfo.commodityId = 0;
  commodityInfo.commodityName = "";
  commodityInfo.commodityDescription = "";
  commodityInfo.commodityStandardList = [];
  commodityInfo.commodityDiscount = 0;
  commodityInfo.commodityDiscountName = "";
  commodityInfo.commoditySales = 0;
  commodityInfo.commoditySaleMoney = 0;
  commodityInfo.commodityCategoryId = 0;
  commodityInfo.commodityCategoryName = "";
  commodityInfo.commodityImgs = [];
  commodityInfo.commodityNewImgs = [];
  commodityInfo.createTime = "";
  commodityInfo.updateTime = "";
}
const drawerDialogCancel_btn = () => {
  drawerDialogHandleClose();
}
const drawerDialogSave_btn = () => {
  if(drawer_dialog_state.value === 0){
    //添加一条商品信息
    addCommodity();
  } else if (drawer_dialog_state.value === 1) {
    //修改一条商品信息
    updateCommodity();
  }
}

//修改一条商品信息
const updateCommodity = async () => {
  //展示提交按钮的loading效果
  isLoadingBtn.value = true;
  //修改商品信息-整理参数
  const requestBody = {
    commodityId:commodityInfo.commodityId,
    commodityName:commodityInfo.commodityName,
    commodityDescription:commodityInfo.commodityDescription,
    commodityDiscount:commodityInfo.commodityDiscount,
    commodityCategoryId:commodityInfo.commodityCategoryId,
    commodityImgs:""
  }
  commodityInfo.commodityNewImgs.push(...commodityInfo.commodityImgs);
  requestBody.commodityImgs = commodityInfo.commodityNewImgs.join();
  //console.log(requestBody);
  if(requestBody.commodityId === 0){
    ElMessage({type:"info",message:"相关参数缺失!"});
    return isLoadingBtn.value = false;
  }
  //发请求更新数据
  let res = await reqUpdateCommodity (requestBody);
  if(res.code === 200) {
    ElMessage({type:"success",message:"商品信息更新成功!"});
    //关闭drawer_dialog
    drawerDialogHandleClose();
    //出现请求商品列表数据
    getCommodityList(pagination_page.value, pagination_size.value);
  }
  console.log('商品信息修改api',res);
  //关闭提交按钮loading效果
  isLoadingBtn.value = false;
  //修改drawer_dialog状态为默认值 非0 1
  drawer_dialog_state.value = 9;
}
//添加一条商品信息
const addCommodity = async () => {
  //@ts-ignore
  if(commodityInfo.commodityCategoryId == "请选择商品分类" || commodityInfo.commodityDiscount == "请选择商品折扣"){
    return ElMessage({type:"info",message:"请将商品信息填写完整!"});
  }
  //展示提交按钮的loading效果
  //isLoadingBtn.value = true;
  //添加商品信息-整理参数
  const requestBody = {
    commodityName:commodityInfo.commodityName,
    commodityDescription:commodityInfo.commodityDescription,
    commodityDiscount:commodityInfo.commodityDiscount,
    commodityCategoryId:commodityInfo.commodityCategoryId,
    commodityImgs:commodityInfo.commodityNewImgs.join()
  }
  if(requestBody.commodityName === "" || requestBody.commodityDescription.trim() === "" || requestBody.commodityCategoryId === 0 || requestBody.commodityImgs.trim() === ""){
    ElMessage({type:"info",message:"请将商品信息填写完整!"});
    return isLoadingBtn.value = false;
  }
  //发请求更新数据
  let res = await reqSaveCommodity (requestBody);
  if(res.code === 200) {
    ElMessage({type:"success",message:"商品添加成功!"});
    //关闭drawer_dialog
    drawerDialogHandleClose();
    //重新请求商品列表数据
    getCommodityList(pagination_page.value, pagination_size.value);
  }
  console.log('添加商品api',res);
  //关闭提交按钮loading效果
  isLoadingBtn.value = false;
  //修改drawer_dialog状态为默认值
  drawer_dialog_state.value = 9;
}
//drawer_dialog中移除旧的商品图片事件
const removeCommodityOldPicture_btn = (imageUrl:string, index:number) => {
  commodityInfo.commodityImgs.splice(index,1);
  console.log(imageUrl,index);
}

//分页器的页面、每页条数发送变化的change事件
const pagination_change = (page:number, pageSize:number) => {
  pagination_page.value = page;
  pagination_size.value = pageSize;
  //重新请求数据
  getCommodityList(page, pageSize);
}

//功能函数：处理商品折扣数字-->折扣名称
const dealDiscountName = (num:number):string => {
  let discountName = "";
  switch (num) {
    case 1:
      discountName = "不打折";
      break;
    case 0.99:
      discountName = "九九折";
      break;
    case 0.95:
      discountName = "九五折";
      break;
    case 0.9:
      discountName = "九折";
      break;
    case 0.85:
      discountName = "八五折";
      break;
    case 0.8:
      discountName = "八折";
      break;
    case 0.7:
      discountName = "七折";
      break;
    case 0.6:
      discountName = "六折";
      break;
    case 0.5:
      discountName = "五折";
      break;
    case 0.4:
      discountName = "四折";
      break;
    case 0.3:
      discountName = "三折";
      break;
    case 0.2:
      discountName = "二折";
      break;
    case 0.1:
      discountName = "一折";
      break;
    default:
      discountName = "其它折";
      break;
  }
  return discountName;
}

//vue生命周期
onMounted(() => {
  //获取商品列表数据
  getCommodityList();
  //请求所有的商品分类信息
  getAllCommodityCategoryList();
})
</script>

<style lang='scss' scoped>
.commodity-page{
  width: 100%;
  height: 100%;

  .page-header{
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    /*头部区域 */
    .header-search{
      width: 350px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .search-input{
        width: 250px;
      }
    }
    .header-select{
      width: 250px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  // 表格样式部分
  .page-table {
    width: 100%;

    .table-attr {
      margin: 2px 3px;
    }
    .table-img{
      width: 60px;
      height: 60px;
    }
  }

  //drawer-dialog部分
  .page-drawerDialog{
    .drawer-categorySelect{
      width: 150px;
    }
    .drawer-descTextarea{
      width: 320px;
      height: 50px;
      font-size:12px;
      color:#9195a3;
      border-radius: 5px;
      border: 1px solid #dcdfe6;
    }
    .drawer-attr{
      margin: 5px 5px;
      cursor: pointer;
    }
    .drawer-discount{
      width: 150px;
    }

    .drawer-image{
      display: flex;     
      .image-item{
        width: 80px;
        height: 80px;
        margin:0 5px 5px 0;
        position: relative;
        border: 1px solid #dcdfe6;
        border-radius: 5px;

        .image-item-img{
          width: 80px;
          height: 80px;
        }
        .image-item-remove {
          position:absolute;
          top:0;
          right:0;
          cursor: pointer;
        }
      }
    }
    .drawer-uploader{
      .uploader-icon{
        width: 80px;
        height: 80px;
      }
    }
  }
  .page-pagination{
    margin-top: 30px;
  }
}
</style>
<style lang="css">
.el-upload-list--picture-card{
  --el-upload-list-picture-card-size:80px;
}
.el-upload--picture-card {
  --el-upload-picture-card-size:80px
}

.image-item-remove {
  opacity: 0;
  transition: opacity 0.5s;
}

.image-item:hover > .image-item-img {
  opacity: 0.5;
}
.image-item:hover > .image-item-remove {
  opacity: 1;
}
</style>